<template>
  <!-- 房屋配置 -->
  <div class="house-add-supporting">
    <div class="house-header">房屋配置</div>
    <div>
      <van-grid :column-num="5">
        <van-grid-item
          v-for="(item, index) in desc"
          :key="index"
          :class="{ active: supportingList.includes(item.text) }"
          @click="supportingHouse(item.text)"
          :clickable="true"
        >
          <template #icon>
            <i class="iconfont" :class="item.icon"></i>
          </template>
          <template #text>
            <span class="text">{{ item.text }}</span>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      desc: [
        { text: '衣柜', icon: 'icon-wardrobe' },
        { text: '洗衣机', icon: 'icon-wash' },
        { text: '空调', icon: 'icon-air' },
        { text: '天然气', icon: 'icon-gas' },
        { text: '冰箱', icon: 'icon-ref' },
        { text: '暖气', icon: 'icon-Heat' },
        { text: '电视', icon: 'icon-vid' },
        { text: '热水器', icon: 'icon-heater' },
        { text: '宽带', icon: 'icon-broadband' },
        { text: '沙发', icon: 'icon-sofa' }
      ],
      supportingList: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    supportingHouse(item) {
      if (this.supportingList.includes(item)) {
        this.supportingList = this.supportingList.filter((obj) => obj !== item)
      } else {
        this.supportingList.push(item)
      }
      this.$emit('supporting', this.supportingList)
    }
  }
}
</script>

<style scoped lang="less">
.house-add-supporting {
  .iconfont {
    font-size: 23px;
  }
  .text {
    font-size: 14px;
  }
}
.house-header {
  color: #333;
  font-size: 14px;
  padding: 15px 15px 9px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
.active {
  color: #21b97a;
}
</style>
